<template>
    <div class="main">
        <loading v-bind:state="state"></loading>
        <header>
            <div class="sx_spread1" @click="toCode">
                <p class="p1">我的二维码</p>
                <img :src="this.$Public.iconImg+'code_sx.svg'">
            </div>
            <div class="sx_spread2" @click="toInterF">
                <p class="p1 left_o">可用积分：{{inter.left}}</p>
                <p class="p1 left_o">全部积分（分）</p>
                <p class="p2" ref="interRef">{{inter.all}}</p>
            </div>
            <img :src="getIcon('arrow_right_white')" class="icon9" @click="toInterF">
            <!--<img src="http://sxian.oss-cn-beijing.aliyuncs.com/pages/sx_userbk.png" class="header-shadow"/>-->
        </header>
        <div class="space"></div>
        <p style="font-size: 14px" v-if="recommendName">
            您是由【{{btnState.userup.name}}(id:{{btnState.userup.up1}})】推荐</p>
        <p style="font-size: 14px" v-else="">暂无上级</p>
        <div class="moneyContainer"
             v-show="checkOnOff(btnState.menu.integral.power)"
        >
            <cell :icon-left="this.$Public.ossImg+'integral.svg'"
                  text-left="我的积分"
                  class="cell-t"
            ></cell>
            <div class="basicsline"></div>
            <div class="inter-nav">
                <btn-icon-above
                        :btn-img="this.$Public.ossImg+'gift.svg'"
                        @click.native="goIntegralMall"
                        v-show="checkOnOff(btnState.menu.integral.sub['mall'])"
                        btn-text="积分商城"></btn-icon-above>
                <btn-icon-above
                        :btn-img="this.$Public.ossImg+'order.svg'"
                        @click.native="toInteOrderlist"
                        v-show="checkOnOff(btnState.menu.integral.sub['order'])"
                        btn-text="积分订单"></btn-icon-above>
                <btn-icon-above
                        :btn-img="this.$Public.ossImg+'coupon.svg'"
                        @click.native="toCoupon"
                        v-show="checkOnOff(btnState.menu.integral.sub['voucher'])"
                        btn-text="代金券"></btn-icon-above>
                <btn-icon-above
                        :btn-img="this.$Public.ossImg+'inte_order.svg'"
                        @click.native="toInterList"
                        v-show="checkOnOff(btnState.menu.integral.sub['query'])"
                        btn-text="积分查询"></btn-icon-above>
            </div>
        </div>
        <div
                class="moneyContainer"
                v-show="checkOnOff(btnState.menu.extension.power)">
            <cell :icon-left="this.$Public.ossImg+'extension.svg'"
                  text-left="我的推广"
                  class="cell-t"
            ></cell>
            <div class="basicsline"></div>
            <div class="inter-nav">
                <btn-icon-above
                        :btn-img="this.$Public.ossImg+'search.svg'"
                        @click.native="toSearchMem"
                        v-show="checkOnOff(btnState.menu.extension.sub['member'])"
                        btn-text="成员查询"></btn-icon-above>
                <btn-icon-above
                        :btn-img="this.$Public.ossImg+'summary.svg'"
                        @click.native="toMoneyCount"
                        v-show="checkOnOff(btnState.menu.extension.sub['integral'])"
                        btn-text="积分汇总"></btn-icon-above>
                <!--<btn-icon-above :btn-img="this.$Public.ossImg+'fen.svg'" @click.native="toIntegralList"-->
                <!--btn-text="积分列表"></btn-icon-above>-->
                <!--<btn-icon-above :btn-img="this.$Public.ossImg+'member.svg'" @click.native="toMember"-->
                <!--btn-text="成员列表"></btn-icon-above>-->
            </div>
        </div>
        <cell :icon-left="this.$Public.ossImg+'card.svg'"
              text-left="卡包"
              :icon-right="this.$Public.iconImg+'arrow_right.svg'"
              class="cell-t2"
              @click.native="toCard"
              v-show="checkOnOff(btnState.menu.package.power)"
        ></cell>
        <cell :icon-left="this.$Public.ossImg+'sort.svg'"
              text-left="排行榜"
              :icon-right="this.$Public.iconImg+'arrow_right.svg'"
              class="cell-t2"
              @click.native="toRankings"
              v-show="checkOnOff(btnState.menu.rankings.power)"
        ></cell>
        <div class="basicsline"></div>
        <cell :icon-left="this.$Public.ossImg+'vip_manage.svg'"
              text-left="代理商申请"
              :icon-right="this.$Public.iconImg+'arrow_right.svg'"
              @click.native="toApply"
              v-show="checkOnOff(btnState.menu.agent_apply.power)"
        ></cell>
        <cell :icon-left="this.$Public.ossImg+'area.svg'"
              text-left="未开通合伙人地区查询"
              :icon-right="this.$Public.iconImg+'arrow_right.svg'"
              class="cell-t2"
              @click.native="toAreaSearch"
              v-show="checkOnOff(btnState.menu.query_area.power)"
        ></cell>
        <div
                class="accredit cell-t2"
                @click="toOpenVip"
                v-show="checkOnOff(btnState.menu.free_vip.power)"
        >
            <img :src="this.$Public.ossImg+'grant.svg'" alt="" class="icon6 marg-l10">
            <div class="accredit-m">
                <p>授权免费开通VIP</p>
                <span>有效期至{{btnState.menu.free_vip.overdue}}</span>
            </div>
            <img :src="this.$Public.iconImg+'arrow_right.svg'" alt="" class="icon5 ">
        </div>
        <div
                class="accredit cell-t2"
                @click="toOpenTop"
                v-show="checkOnOff(btnState.menu.free_top.power)"
        >
            <img :src="this.$Public.ossImg+'grant.svg'" alt="" class="icon6 marg-l10">
            <div class="accredit-m">
                <p>授权免费开通总代</p>
                <span>有效期至{{btnState.menu.free_top.overdue}}</span>
            </div>
            <img :src="this.$Public.iconImg+'arrow_right.svg'" alt="" class="icon5 ">
        </div>
        <popup :pupData="pupData" @sureFun="sureFun" @cancelFun="cancelFun" ref="popupref"></popup>
    </div>
</template>
<script type="text/ecmascript-6">
    import Cell from '@/components/common/Cell';
    import BtnIconAbove from '@/components/common/BtnIconAbove';

    export default {
        name: `spread`,
        components: {Cell, BtnIconAbove},
        data() {
            return {
                inter: {}, // 积分
                pupData: {
                    des: '弹出的文字'
                },
                state: true,
                btnState: {
                    menu: {
                        integral: {
                            power: 'off',
                            sub: {
                                mall: 'off',
                                order: 'off',
                                voucher: 'off',
                                query: 'off'
                            }
                        },
                        extension: {
                            power: 'off',
                            sub: {
                                member: 'off',
                                integral: 'off'
                            }
                        },
                        package: {
                            power: 'off'
                        },
                        rankings: {
                            power: 'off'
                        },
                        agent_apply: {
                            power: 'off'
                        },
                        query_area: {
                            power: 'off'
                        },
                        free_vip: {
                            power: 'off',
                            overdue: ''
                        },
                        free_top: {
                            power: 'off',
                            overdue: ''
                        }
                    },
                    integral: {},
                    qr: {}
                },
                recommendName: false
            };
        },
        created() {
            // 调用获取显示权限接口方法
            this.getBtnState();
        },
        methods: {
            getIcon(icon) {
                // 获取svg
                return this.$Public.iconImg + icon + '.svg';
            },
            sureFun() {
                // str为子组件传来的参数
                this.$refs.popupref.switchState();
            },
            cancelFun() {
                this.$refs.popupref.switchState();
            },
            toCard() {
                //  跳转我的卡包
                this.$router.push({name: 'card'});
            },
            toRankings() {
                //  跳转排行榜
                this.$router.push('/rankings');
            },
            toAreaSearch() {
                //  跳转未开通地区查询
                this.$router.push('/areaSearch');
            },
            toOpenVip() {
                //  跳转授权开通vip
                this.$router.push({
                    name: 'openVip',
                    query: {
                        para: 'vip'
                    }
                });
            },
            toOpenTop() {
                //  跳转授权开通总代
                this.$router.push({
                    name: 'openVip',
                    query: {
                        para: 'top'
                    }
                });
            },
            toCode() {
                //  跳转我的二维码
                // 跳转前的处理
                if (this.btnState.qr.status === 'no') {
                    alert(this.btnState.qr.msg);
                } else {
                    this.$router.push({
                        name: 'code',
                        query: {name: this.btnState.qr.name, id: this.btnState.qr.id, url: this.btnState.qr.url}
                    });
                }
            },
            toInter: function () {
                //  跳转我的积分
                this.$router.push('/');
            },
            toInterF: function () {
                //  跳转全部积分展示页
                this.$router.push({
                    name: 'integral',
                    query: {
                        all: this.btnState.integral.all,
                        left: this.btnState.integral.left,
                        mouth: this.btnState.integral.mouth,
                        today: this.btnState.integral.today
                    }
                });
            },
            toInterList: function () {
                //  跳转积分list
                this.$router.push('/intelist');
            },
            demo: function () {
                this.$refs.popupref.switchState();
            },
            toMember() {
                // 成员列表
                this.$router.push('/memberlist');
            },
            toMoneyCount() {
                // 收益查询
                this.$router.push('/integralcount');
            },
            goIntegralMall() {
                // 积分商城
                this.$router.push({
                    name: 'integralMall'
                });
            },
            toInteOrderlist() {
                // 积分订单
                this.$router.push('/inteorderlist');
            },
            toCoupon() {
                // 代金券
                this.$router.push('/coupon');
            },
            toIntegralList() {
                // 积分列表
                this.$router.push('/integrallist');
            },
            toSearchMem() {
                // 成员查询
                this.$router.push('/searchmem');
            },
            toApply() {
                // 申请代理商
                this.$router.push('applyLevel');
            },
            getBtnState() {
                this.$Spread.getAllState().then(res => {
                    this.btnState = res;
                    delete this.btnState['status'];
                    // 积分去小数点后两位（不四舍五入）所有积分
                    this.inter.all = this.btnState.integral.all.toString();
                    if (this.inter.all.indexOf('.') !== -1) {
                        let indexNum = this.inter.all.indexOf('.');
                        this.inter.all = this.inter.all + '000';
                        this.inter.all = this.inter.all.substr(0, indexNum + 3);
                        if (this.inter.all.length > 8) {
                            this.$refs.interRef.style.fontSize = 10 + 'vw';
                        }
                    } else {
                        this.inter.all = this.btnState.integral.all;
                    }
                    // 可用积分
                    this.inter.left = this.btnState.integral.left.toString();
                    if (this.inter.left.indexOf('.') !== -1) {
                        let indexNum = this.inter.left.indexOf('.');
                        this.inter.left = this.inter.left + '000';
                        this.inter.left = this.inter.left.substr(0, indexNum + 3);
                    } else {
                        this.inter.left = this.btnState.integral.left;
                    }
                    // this.inter.left = this.btnState.integral.left;
                    this.state = false;
                    try {
                        if (this.btnState.userup.up1 === '' || this.btnState.userup.up1 == null) {
                            this.recommendName = false;
                        } else {
                            this.recommendName = true;
                        }
                    } catch (e) {
                    }
                }, () => {
                    this.state = false;
                });
            },
            checkOnOff(state) {
                //  转换on/off
                if (state === 'on') {
                    return true;
                } else {
                    return false;
                }
            }
        },
        beforeRouteLeave(to, from, next) {
            // 设置下一个路由的 meta
            to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
            next();
        }
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import "../../assets/stylus/main.styl"
    .main {
        flex-y()
        padding-bottom 80px
        /*margin-bottom 80px*/
    }

    .moneyContainer {
        flex-y()
        background-color white
        margin 10px 0
        panel()
    }

    .sx_spread1 {
        bor-r(#fff, 1px);
        padding-right: 5vw;
        margin-right 5vw;
        flex-y()
        align-items center
        & img {
            width 20vw
            height 20vw
        }
    }

    .sx_spread2 {
        min-width 50%
    }

    .left_o {
        margin-left: 1vw
    }

    .p1 {
        word-vw(14px, #fff);
        line-height 1.7
    }

    .p2 {
        word-vw(50px, #fff)
    }

    .space {
        space()
    }

    header {
        height: vw(196px);
        position: relative;
        flex-x();
        /*padding 0 2vw*/
        justify-content center
        head_bg();
        width: 100vw;
    }

    .inter {
        word-vw(50px, #fff)
    }

    .inter-b {
        word-vw(14px, #fff);
        padding-top: 3vw
    }

    .icon25 {
        height: vw(25px)
    }

    .icon6 {
        width: 6vw
    }
    .icon5 {
        width: 4vw
        margin-right 10px
    }

    .icon9 {
        width: 9vw
    }

    .inter-sec {
        flex-x();
        background: #FFF;
        padding: 0 vw(20px);
        height: vw(88px)
    }

    .basicsline {
        width: 100vw;
        height: 1px;
        background: border-color
    }

    .inter-nav {
        flex-x();
        padding: 0 2vw;
        background: white;
        width 100%;
        box-sizing border-box
        justify-content flex-start
    }

    .cell-t {
        margin-top: vw(15px)
    }

    .cell-t2 {
        margin-top: vw(10px)
    }

    .accredit {
        flex-x();
        height: vw(64px);
        width: 100vw;
        background: white
    }

    .accredit-m {
        flex: 1;
        flex-y();
        align-items: flex-start;
        padding-left: 10px
        & p {
            font-size: 3.7vw
        }
        & span {
            word-vw(12px, #999)
            margin-top: 1vw;
        }
    }

    .marg-l10 {
        padding-left: 10px
    }

    .marg-r10 {
        padding-right: 10px
    }

    .header-shadow {
        position: absolute;
        width: 100vw;
        bottom: 0;
        left 0
    }
</style>
